<template>
  <div class="usercenter-box" style="background-color:#FFFFFF; ">
    <div class="common-usercenter-box" style="min-height: 515px;">
      <div class="common-items-header" style="padding:10px;">
        <h6 class="common-title">一卡通充值</h6>
        <div class="layui-btn-group">
          <nuxt-link class="layui-btn layui-btn-normal layui-btn-sm" to="/charge4">在线充值</nuxt-link>
          <nuxt-link class="layui-btn layui-btn-normal layui-btn-sm" to="/charge-list4">充值记录</nuxt-link>
        </div>
      </div>

      <div class="userrecharge-box" style="padding: 10px 0px">
          <div class="recharge-tips">
            <img src="http://baota.66skt.cn/Public/Front/xinmeng/images/safe.png">
            <div class="recharge-words">
              <h5>重要通知</h5>
              <p>加款后，如果刷新余额还未到账，请及时联系客服。</p>
              <p>订单问题请联系网站客服QQ：，电话：。</p>
              <!-- <p>订单问题请联系网站客服QQ：，电话：。</p>
              <p>1、充值后，如果刷新余额还未到账，请 <a href="/" style="font-weight: bold;color: red;">点我补款</a></p>
              <p>2、订单问题请联系网站客服QQ：<span>{{ contact.frontServiceQQ }}</span>，电话：<span></span>。</p>
              <p>3、请关闭所有弹出窗口杀手之类的功能，否则在线支付将无法继续。</p>
              <p>4、 如:google toolbar,上网助手,alexa toolbar,baidu,等 在开始支付后，不要关闭任何窗口，直到支付成功。</p>
              <p style="color: #72ab78">5、1</p>                     -->
            </div>
          </div>
          <div class="recharge-form-box" >
            <form class="layui-form" method="post" action="/" autocomplete="off" target="_blank">
              <div class="layui-form-item">
                <label class="layui-form-label">充值卡号</label>
                <div class="layui-input-block choosepay-way" style="width: 300px;">
                  <el-input v-model="cardCode" placeholder="请输入充值卡号"></el-input>
                </div>
              </div>

              <div class="layui-form-item" id="recharge_btn">
                <label class="layui-form-label" style="display:inline-block;"></label>
                <div class="layui-input-block" >
                  <el-button @click="doRecharge" type="primary">立即充值</el-button>
                  <el-button type="warning">购买卡密</el-button>
                </div>
              </div>
            </form>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import SelectFilter from '@/components/selectFilter'
import orderDetailDialog from '@/components/orderDetailDialog'
import pageMixin from '@/mixins/page'

export default {
  layout: 'webIn4',
  components: {
    SelectFilter,
    orderDetailDialog
  },
  mixins: [pageMixin],
  data() {
    return {
      cardCode: '',
      isLoading: true,
    }
  },
  methods: {
    submit() {
      this.complainVisible = true
    },
    dialogClose() {
      this.complainVisible = false
    },
    async doRecharge() {
      if(!this.cardCode) {
        return
      }
      const res = await this.$axios.post('/finance/rechargeCard/use', {
        cardNo: this.cardCode,
      })
      if(res.code === 1001) {
        this.$message.success('充值成功')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.userrecharge-box {
  .recharge-words {
    width: auto;
  }
  .complain-dialog {
    .el-row {
      padding: 15px;
      .el-col {
        & > span:first-child {
          color: $--color-primary;
        }
      }
      .el-col-6 {
        min-width: 150px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>

section {
  padding: 0 15px 30px 15px;
  background: white;
}
.el-tab-pane {
  padding: 15px;
}
.row {
  & > span:first-child {
    width: 100px;
    font-size: 14px;
    text-align: right;
    line-height: 40px;
    display: inline-block;
  }
  & + .row {
    margin-top: 15px;
  }
  .remind {
    font-size: 14px;
    display: inline-block;
    width: calc(100% - 80px);
    vertical-align: text-top;
    margin-left: 100px;
    p + p {
      margin-top: 10px;
    }
  }
  .el-input {
    width: 200px;
  }
}
.charge-pay {
  display: inline-block;
  vertical-align: middle;
  li {
    height: 50px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    border: 1px solid $--basic-border-color;
    img {
      object-fit: contain;
    }
    &:hover {
      cursor: pointer;
      border: 1px solid $--color-primary;
    }
    &.selected {
      border: 1px solid $--color-primary;
    }
  }
  li + li {
    margin-left: 15px;
  }
}
.third-tip {
  padding: 10px 15px;
  font-size: 12px;
  color: $--basic-orange;
  border: 1px dashed $--basic-orange;
}
.el-button {
  // margin: 15px 0 0 115px;
  // width: 150px;
}
.choosepay-way {
  margin-left: 0;
}
.userrecharge-box {
  .layui-form-label {
    min-width: 100px;
  }
  .choosepay-way {
    display: flex;
    margin-left: 0;
  }
  .payitems {
    position: relative;
    border: 1px solid #f1f0f4;
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    float: left;
    cursor: pointer;
    margin-right: 20px;
  }
  .payitems-active {
    border: 1px solid #ff0000;
  }
}
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style6/common.css';
// @import 'assets/style/style6/openlogin.css';
// @import 'assets/style/style6/style.css';
// @import 'assets/style/style6/font_1451715_0505c2bxv7b7.css';
// @import 'element-ui/lib/theme-chalk/index.css';

</style>
<style>
@import 'assets/style/el-adapter.css';
</style>
